<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
      <el-select  @change="changeMap" v-model="mapType" filterable placeholder="请选择">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"

                  :value="item.value">
          </el-option>
      </el-select>
<!--        <div class="choose-area">-->
<!--            <el-button type="primary"><router-link to="/china">中国地图</router-link></el-button>-->
<!--            <el-button type="primary"><router-link to="/world">世界地图</router-link></el-button>-->
<!--            <el-col :span="12">-->
<!--                <div class="sub-title">输入国家名字查询该国家过去7天疫情趋势图</div>-->
<!--                <el-autocomplete-->
<!--                        class="inline-input"-->
<!--                        v-model="state1"-->
<!--                        :fetch-suggestions="querySearch"-->
<!--                        placeholder="请输入内容"-->
<!--                        @select="handleSelect"-->
<!--                ></el-autocomplete>-->
<!--            </el-col>-->
<!--        </div>-->
        <div class="view"   >
            <router-view ></router-view>
        </div>

  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
    data(){
      return{
          mapType:'中国地图',
          options:[{label:'中国地图',value:'china'},{label:'世界地图',value:'world'}]
      }
    },
    methods:{
        changeMap(newValue){
            console.log(newValue);

            this.$router.push({path:'/'+newValue});
        },


        querySearch(queryString, cb) {
            var Data = this.globalData;
            var results = queryString ? Data.filter(this.createFilter(queryString)) : Data;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return queryString;
        },
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
    .view{
        width: 800px;
        margin: 50px auto auto;
    }
</style>
